<template>
	<div class="nearby__item" v-show="item.imgUrl">
		<img
			class="nearby__item__img"
			:src="item.imgUrl"
			alt="banner--img"
		/>
		<div
			class="nearby__content"
			:style="{borderBottom: hideBorder ? 'none' : '0.01rem solid #f1f1f1'}"
		>
			<div class="nearby__content__title">{{item.name}}</div>
			<div class="nearby__content__tags">
				<span class="nearby__content__tag">月售：{{item.sales}}</span>
				<span class="nearby__content__tag">起送：{{item.expressLimit}}</span>
				<span class="nearby__content__tag">基础运费：{{item.expressPrice}}</span>
			</div>
			<p class="nearby__content__highlight">{{item.slogan}}</p>
		</div>
	</div>
</template>

<script>
	import { defineComponent } from 'vue'

	export default defineComponent({
		name: 'ShopInfo',
		props: ['item', 'hideBorder']
	})
</script>

<style lang="scss" scoped>
	@import '../style/variable.scss';

	.nearby__item {
		display: flex;
		padding: .12rem 0;
		&__img {
			width: .56rem;
			height: .56rem;
			margin-right: .16rem;
		}
	}
	.nearby__content {
		flex: 1;
		padding-bottom: .12rem;
		&__title {
			line-height: .22rem;
			font-size: .16rem;
			color: $content-font-color;
		}
		&__tags {
			margin-top: .08rem;
			line-height: .18rem;
			font-size: .13rem;
			color: $content-font-color;
		}
		&__tag {
			margin-right: .1rem;
		}
		&__highlight {
			line-height: .18rem;
			font-size: .13rem;
			color: #e93b3b;
			margin: .08rem 0 0 0;
		}
	}
</style>
